async function getDashboard() {
    // ---------------- 使用try catch处理 失败
    try {
        const res = await axios({
            url: '/dashboard',
            method: 'get',
        })

        // 只能能成功请求到/dashboard的数据即可，数据的渲染后续处理
        // console.log(res.data.data.overview);
        // 显示overview数据
        for (let key in res.data.data.overview) {

            let dom = document.querySelector(`span[name=${key}]`)
            if (dom) {
                dom.innerHTML = res.data.data.overview[key]
            }
        }

        // ---- 全年薪资分布
        // console.log(res);
        let month = res.data.data.year.map(item => item.month)
        let salary = res.data.data.year.map(item => item.salary)
        salaryChart(month, salary)

        // ---- 班级薪资分布
        // console.log(res);
        let data = res.data.data.salaryData.map(item => {

            return { value: item.g_count + item.b_count, name: item.label };
        })

        salaryClass(data)

        // ---- 每组薪资分布
        // console.log(res);
        salaryGroup(res.data.data.groupData)

        // ---- 男女薪资分布
        // console.log(res);
        let boyData = res.data.data.salaryData.map(item => {
            return {
                name:item.label,
                value:item.b_count
            }
        })

        let girlData = res.data.data.salaryData.map(item => {
            return {
                name:item.label,
                value:item.g_count
            }
        })
        salaryGender(boyData,girlData)

        // ---- 地理区域分布
        initMapChart(res.data.data.provinceData)

    } catch (error) {
        console.log(error);
        tip('token不正确')
    }
}

getDashboard();


// 封装一个函数，显示 全年薪资走势
function salaryChart(month, salary) {
    let dom = document.querySelector('#line')
    let myChart = echarts.init(dom)

    let option = {
        title: {
            text: '2021全学科薪资走势',
            left: '4%',
            top: '5%'
        },
        grid: {
            top: '20%',
            left: '10%',
        },
        tooltip: {
            show: true,
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            data: month,
            axisLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        series: [
            {
                // data: [820, 932, 901, 934, 1290, 1330, 1320],
                data: salary,
                type: 'line',
                smooth: true,
                symbol: 'emptyCircle',
                symbolSize: 10,
                lineStyle: {
                    width: 5,
                    color: '#608bff'
                },
                areaStyle: {
                    color: {
                        // 线性渐变
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(83,168,255,1)'
                            },
                            {
                                offset: 0.8,
                                color: 'rgba(89,154,255,0)'
                            }
                        ],
                        global: false           // 缺省为 false
                    }

                }

            }
        ]
    };

    myChart.setOption(option)
}


// 封装一个函数，显示 班级薪资统计
function salaryClass(data) {
    let dom = document.querySelector('#salary')
    let myChart = echarts.init(dom)
    let option = {
        title: {
            text: '班级薪资分布',
            top: '4%',
            left: '5%',
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: '5%',
            left: 'center'
        },
        color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['60%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 30,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: data
            }
        ]
    };

    myChart.setOption(option)
}


// 封装每组薪资统计
function salaryGroup(groupData) {
    let dom = document.querySelector('#lines')
    let myChart = echarts.init(dom)

    let option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {   // hope_salary
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            },
            {   // salary
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }
        ],
        color: [
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: 'rgba(81, 217, 168,1)' // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: 'rgba(81, 217, 168,0)' // 100% 处的颜色
                    }
                ],
                global: false // 缺省为 false
            },
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: 'rgba(73, 159, 238,1)' // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: 'rgba(73, 159, 238,0)' // 100% 处的颜色
                    }
                ],
                global: false // 缺省为 false
            }
        ]
    };

    function getGroup(num = 1) {
        let names = groupData[num].map(item => item.name)
        let hopeSalary = groupData[num].map(item => item.hope_salary)
        let salary = groupData[num].map(item => item.salary)
        option.xAxis.data = names;
        option.series[0].data = hopeSalary
        option.series[1].data = salary
    }

    getGroup(1)

    // 为 组号按钮注册事件
    let oBtns = document.querySelectorAll('#btns button')
    oBtns.forEach(item => {
        item.onclick = function () {
            // console.log(item.innerHTML);
            getGroup(item.innerHTML)
            myChart.setOption(option)

            document.querySelector('#btns .btn-blue').classList.remove('btn-blue')
            this.classList.add('btn-blue')
        }
    })

    myChart.setOption(option)
}


// 封装男女薪资分布函数
function salaryGender(boyData, girlData) {
    let dom = document.querySelector('#gender')
    let myChart = echarts.init(dom)
    let option = {
        title: [
            {
                text: '男女薪资分布',
                left: '3%',
                top: '4%'
            },
            {
                text: '男',
                left: 'center',
                top: '45%'
            }, {
                text: '女',
                left: 'center',
                top: '90%'
            }
        ],
        tooltip: {
            trigger: 'item'
        },
        color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['20%', '30%'],
                data:boyData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                center: ['50%', '25%']
            },
            {
                name: 'Access From',
                type: 'pie',
                radius: ['20%', '30%'],
                data: girlData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                center: ['50%', '75%']
            }
        ]
    };
    myChart.setOption(option)
}


// ---------------- 地理区域分布图函数
function initMapChart(provinceData){
    // 初始化echarts
    let myChart = echarts.init(document.querySelector('#map'))

    // ---------------- 替换演示数据
    const data = [
        { name: '南海诸岛', value: 0 },
        { name: '北京', value: 0 },
        { name: '天津', value: 0 },
        { name: '上海', value: 0 },
        { name: '重庆', value: 0 },
        { name: '河北', value: 0 },
        { name: '河南', value: 0 },
        { name: '云南', value: 0 },
        { name: '辽宁', value: 0 },
        { name: '黑龙江', value: 0 },
        { name: '湖南', value: 0 },
        { name: '安徽', value: 0 },
        { name: '山东', value: 0 },
        { name: '新疆', value: 0 },
        { name: '江苏', value: 0 },
        { name: '浙江', value: 0 },
        { name: '江西', value: 0 },
        { name: '湖北', value: 0 },
        { name: '广西', value: 0 },
        { name: '甘肃', value: 0 },
        { name: '山西', value: 0 },
        { name: '内蒙古', value: 0 },
        { name: '陕西', value: 0 },
        { name: '吉林', value: 0 },
        { name: '福建', value: 0 },
        { name: '贵州', value: 0 },
        { name: '广东', value: 0 },
        { name: '青海', value: 0 },
        { name: '西藏', value: 0 },
        { name: '四川', value: 0 },
        { name: '宁夏', value: 0 },
        { name: '海南', value: 0 },
        { name: '台湾', value: 0 },
        { name: '香港', value: 0 },
        { name: '澳门', value: 0 },
    ];
    
    // ---------------- 使用provinceData中的value替换 data中的value
    data.forEach(eachItem=>{
        let res = provinceData.find(findItem => findItem.name.indexOf(eachItem.name) >= 0)
        if(res){
            eachItem.value = res.value
        }
    })
    
    // ---------------- 最大值
    provinceData.sort((a,b)=>b.vaule - a.value)
    
    // var resultdata2 = [];
    
    // var sum2 = 0;
    // var titledata = [];
    // for (var i = 0; i < data.length; i++) {
    //     var d2 = {
    //         name: data[i].name,
    //         value: data[i].value2
    //     };
    //     titledata.push(data[data.length - i - 1].name)
    
    //     resultdata2.push(d2);
    
    //     sum2 += data[i].value2;
    // }
    
    // function NumDescSort(a, b) {
    //     return a.value - b.value;
    //     // return b.value-a.value;
    // }
    
    // resultdata2.sort(NumDescSort);

    // 自定义配置项
    let option = {
        title: [{
            text: '地域分布',
            // subtext: '纯属虚构',
            left: 'center',
            top: 20
        }, 
        // {
        //     text: "前十省份统计: " ,
        //     right: 200,
        //     top: 40,
        //     width: 100,
        //     textStyle: {
        //         color: 'black',
        //         fontSize: 16
        //     }
        // }, 
        ],
        tooltip: {
            trigger: 'item'
        },
        legend: {
            show:false,
            orient: 'vertical',
            left: 'left',
            data: ['备案地'],
            selectedMode: 'single',
        },
        visualMap: {
            min: 0,
            // ---------------- 设置数据范围的最大值
            max: provinceData[0].value,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            calculable: true,
            colorLightness: [0.2, 100],
            color: ['#c05050', '#e5cf0d', '#5ab1ef'],
            dimension: 0
        },
        // toolbox: {
        //     show: true,
        //     orient: 'vertical',
        //     left: 'right',
        //     top: 'center',
        //     feature: {
        //         dataView: {
        //             readOnly: false
        //         },
        //         restore: {},
        //         saveAsImage: {}
        //     }
        // },
        grid: {
            right: 40,
            top: 100,
            bottom: 40,
            width: '30%'
        },
        xAxis: [{
            show:false,
            position: 'top',
            type: 'value',
            boundaryGap: false,
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
        }],
        yAxis: [{
            show:false,
            type: 'category',   
            // data: titledata,
            axisTick: {
                alignWithLabel: true
            }
        }],
        series: [{
            z: 1,
            name: '备案地',
            type: 'map',
            map: 'china',
            left: '10',
            right: '5%',
            top: 10,
            // bottom: "5%",
            zoom: 0.9,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            //roam: true,
            data: data
        },
        // {
        //     name: '拼框门',
        //     z: 2,
        //     type: 'bar',
        //     label: {
        //         normal: {
        //             show: true
        //         },
        //         emphasis: {
        //             show: true
        //         }
        //     },
        //     itemStyle: {
        //         emphasis: {
        //             color: "rgb(254,153,78)"
        //         }
        //     },
        //     data: resultdata2
        // }
        ]
    }; 
    
    // 应用配置项
    myChart.setOption(option)
}